@charset "utf-8";
/* Split */
@function grid-span($cols, $total:24, $gutter-width:3em, $column-width:7em) {
	@if ($gutter-width != 0) {
		@return ($column-width * $cols  + $gutter-width * ($cols  - 1)) /
			($column-width * $total + $gutter-width * ($total - 1)) * 100%;
	} @else {
		@return ($cols / $total) * 100%;
	}
}



@mixin split($halfSpace:5px,$selector:''){
	#{$selector} .w-1-1   { width:100%;      }
	#{$selector} .w-1-2   { width:50%;       }
	#{$selector} .w-1-3   { width:33.33333%; }
	#{$selector} .w-2-3   { width:66.66666%; }
	#{$selector} .w-1-4   { width:25%;       }
	#{$selector} .w-3-4   { width:75%;       }
	#{$selector} .w-1-5   { width:20%; }
	#{$selector} .w-2-5   { width:40%; }
	#{$selector} .w-3-5   { width:60%; }
	#{$selector} .w-4-5   { width:80%; }
	#{$selector} .w-1-6   { width:16.66666%; }
	#{$selector} .w-5-6   { width:83.33333%; }
	#{$selector} .w-1-8   { width:12.5%;     }
	#{$selector} .w-3-8   { width:37.5%;     }
	#{$selector} .w-5-8   { width:62.5%;     }
	#{$selector} .w-7-8   { width:87.5%;     }
	#{$selector} .w-1-12  { width: 8.33333%; }
	#{$selector} .w-5-12  { width:41.66666%; }
	#{$selector} .w-7-12  { width:58.33333%; }
	#{$selector} .w-11-12 { width:91.66666%; }
	#{$selector} .w-1-24  { width: 4.16666%; }
	#{$selector} .w-5-24  { width:20.83333%; }
	#{$selector} .w-7-24  { width:29.16666%; }
	#{$selector} .w-11-24 { width:45.83333%; }
	#{$selector} .w-13-24 { width:54.16666%; }
	#{$selector} .w-17-24 { width:70.83333%; }
	#{$selector} .w-19-24 { width:79.16666%; }
	#{$selector} .w-23-24 { width:95.83333%; }



	#{$selector} .split {
		-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
		margin-left:- $halfSpace !important;
		*margin-left:0 !important;
		margin-right:- $halfSpace !important;
		*margin-right:0 !important;
		padding-left:0 !important;
		padding-right:0 !important;
		clear:both;
		*text-align:justify !important;
		*text-justify:distribute-all-lines;
		*font-size:0 !important;
		*zoom:expression(this.runtimeStyle.zoom="1", this.appendChild( document.createElement("span") ).style.fontSize="0");

		&:before {
			-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
		}

		&:after {
			-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
			content:"";
			display:block;
			*display:inline-block;
			width:100%;
		}
	}



	#{$selector} .split .s-1-1,  #{$selector} .split .s-1-2,  #{$selector} .split .s-1-3,  #{$selector} .split .s-2-3,   #{$selector} .split .s-1-4,   #{$selector} .split .s-3-4,
	#{$selector} .split .s-1-5,  #{$selector} .split .s-2-5,  #{$selector} .split .s-3-5,  #{$selector} .split .s-4-5,
	#{$selector} .split .s-1-6,  #{$selector} .split .s-5-6,  #{$selector} .split .s-1-8,  #{$selector} .split .s-3-8,   #{$selector} .split .s-5-8,   #{$selector} .split .s-7-8,
	#{$selector} .split .s-1-12, #{$selector} .split .s-5-12, #{$selector} .split .s-7-12, #{$selector} .split .s-11-12,
	#{$selector} .split .s-1-24, #{$selector} .split .s-5-24, #{$selector} .split .s-7-24, #{$selector} .split .s-11-24, #{$selector} .split .s-13-24, #{$selector} .split .s-17-24, #{$selector} .split .s-19-24, #{$selector} .split .s-23-24 {
		-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
		position:relative;
		margin-left:0 !important;
		margin-right:0 !important;
		padding-left: $halfSpace !important;
		*padding-left:0 !important;
		padding-right: $halfSpace !important;
		*padding-right:0 !important;
		list-style:none;
		min-height:1px;
		float:left;
		*float:none;
		*text-align:left;
		*font-size:medium;
		vertical-align:top;
		*display:inline;
		*zoom:1;

		&:before {
			-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
		}

		&:after {
			-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
		}
	}



	#{$selector} .split .w-1-1,  #{$selector} .split .w-1-2,  #{$selector} .split .w-1-3,  #{$selector} .split .w-2-3,   #{$selector} .split .w-1-4,   #{$selector} .split .w-3-4,
	#{$selector} .split .w-1-5,  #{$selector} .split .w-2-5,  #{$selector} .split .w-3-5,  #{$selector} .split .w-4-5,
	#{$selector} .split .w-1-6,  #{$selector} .split .w-5-6,  #{$selector} .split .w-1-8,  #{$selector} .split .w-3-8,   #{$selector} .split .w-5-8,   #{$selector} .split .w-7-8,
	#{$selector} .split .w-1-12, #{$selector} .split .w-5-12, #{$selector} .split .w-7-12, #{$selector} .split .w-11-12,
	#{$selector} .split .w-1-24, #{$selector} .split .w-5-24, #{$selector} .split .w-7-24, #{$selector} .split .w-11-24, #{$selector} .split .w-13-24, #{$selector} .split .w-17-24, #{$selector} .split .w-19-24, #{$selector} .split .w-23-24 {
		-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
		position:relative;
		*margin-left:0 !important;
		*margin-right:0 !important;
		*padding-left:0 !important;
		*padding-right:0 !important;
		list-style:none;
		min-height:1px;
		float:left;
		*float:none;
		*text-align:left;
		*font-size:medium;
		vertical-align:top;
		*display:inline;
		*zoom:1;
	}

	.split .w-item:first-child { padding-left:$halfSpace !important; *padding-left:0 !important; }
	.split .w-item:last-child { padding-right:$halfSpace !important; *padding-right:0 !important; }



	$column-width:7em;
	$gutter-width:3em;
	#{$selector} .split .s-1-1   { width:100% !important;      *width:grid-span( 1,  1) !important; }
	#{$selector} .split .s-1-2   { width:50% !important;       *width:grid-span(12, 24) !important; }
	#{$selector} .split .s-1-3   { width:33.33333% !important; *width:grid-span( 8, 24) !important; }
	#{$selector} .split .s-2-3   { width:66.66666% !important; *width:grid-span(16, 24) !important; }
	#{$selector} .split .s-1-4   { width:25% !important;       *width:grid-span( 6, 24) !important; }
	#{$selector} .split .s-3-4   { width:75% !important;       *width:grid-span(18, 24) !important; }
	#{$selector} .split .s-1-6   { width:16.66666% !important; *width:grid-span( 4, 24) !important; }
	#{$selector} .split .s-5-6   { width:83.33333% !important; *width:grid-span(20, 24) !important; }
	#{$selector} .split .s-1-8   { width:12.5% !important;     *width:grid-span( 3, 24) !important; }
	#{$selector} .split .s-3-8   { width:37.5% !important;     *width:grid-span( 9, 24) !important; }
	#{$selector} .split .s-5-8   { width:62.5% !important;     *width:grid-span(15, 24) !important; }
	#{$selector} .split .s-7-8   { width:87.5% !important;     *width:grid-span(21, 24) !important; }
	#{$selector} .split .s-1-12  { width: 8.33333% !important; *width:grid-span( 2, 24) !important; }
	#{$selector} .split .s-5-12  { width:41.66666% !important; *width:grid-span(10, 24) !important; }
	#{$selector} .split .s-7-12  { width:58.33333% !important; *width:grid-span(14, 24) !important; }
	#{$selector} .split .s-11-12 { width:91.66666% !important; *width:grid-span(22, 24) !important; }
	#{$selector} .split .s-1-24  { width: 4.16666% !important; *width:grid-span( 1, 24) !important; }
	#{$selector} .split .s-5-24  { width:20.83333% !important; *width:grid-span( 5, 24) !important; }
	#{$selector} .split .s-7-24  { width:29.16666% !important; *width:grid-span( 7, 24) !important; }
	#{$selector} .split .s-11-24 { width:45.83333% !important; *width:grid-span(11, 24) !important; }
	#{$selector} .split .s-13-24 { width:54.16666% !important; *width:grid-span(13, 24) !important; }
	#{$selector} .split .s-17-24 { width:70.83333% !important; *width:grid-span(17, 24) !important; }
	#{$selector} .split .s-19-24 { width:79.16666% !important; *width:grid-span(19, 24) !important; }
	#{$selector} .split .s-23-24 { width:95.83333% !important; *width:grid-span(23, 24) !important; }
	$column-width:15em;
	$gutter-width:1em;
	#{$selector} .split .s-1-5   { width:20% !important; *width:grid-span(1, 5) !important; }
	#{$selector} .split .s-2-5   { width:40% !important; *width:grid-span(2, 5) !important; }
	#{$selector} .split .s-3-5   { width:60% !important; *width:grid-span(3, 5) !important; }
	#{$selector} .split .s-4-5   { width:80% !important; *width:grid-span(4, 5) !important; }
}



@mixin split_span_1col($halfSpace:5px,$selector:''){
	/* [Split 1 Column] */
	#{$selector} .split .s-1-1,  #{$selector} .split .s-1-2,  #{$selector} .split .s-1-3,  #{$selector} .split .s-2-3,   #{$selector} .split .s-1-4,   #{$selector} .split .s-3-4,
	#{$selector} .split .s-1-5,  #{$selector} .split .s-2-5,  #{$selector} .split .s-3-5,  #{$selector} .split .s-4-5,
	#{$selector} .split .s-1-6,  #{$selector} .split .s-5-6,  #{$selector} .split .s-1-8,  #{$selector} .split .s-3-8,   #{$selector} .split .s-5-8,   #{$selector} .split .s-7-8,
	#{$selector} .split .s-1-12, #{$selector} .split .s-5-12, #{$selector} .split .s-7-12, #{$selector} .split .s-11-12,
	#{$selector} .split .s-1-24, #{$selector} .split .s-5-24, #{$selector} .split .s-7-24, #{$selector} .split .s-11-24, #{$selector} .split .s-13-24, #{$selector} .split .s-17-24, #{$selector} .split .s-19-24, #{$selector} .split .s-23-24 {
		float:none;
		display:block;
		width:auto;
	}
}



@mixin split_width_1col($halfSpace:5px,$selector:''){
	/* [Split W 1 Column] */
	#{$selector} .split .w-1-1,  #{$selector} .split .w-1-2,  #{$selector} .split .w-1-3,  #{$selector} .split .s-2-3,   #{$selector} .split .w-1-4,   #{$selector} .split .s-3-4,
	#{$selector} .split .w-1-5,  #{$selector} .split .s-2-5,  #{$selector} .split .s-3-5,  #{$selector} .split .s-4-5,
	#{$selector} .split .w-1-6,  #{$selector} .split .s-5-6,  #{$selector} .split .w-1-8,  #{$selector} .split .s-3-8,   #{$selector} .split .s-5-8,   #{$selector} .split .s-7-8,
	#{$selector} .split .w-1-12, #{$selector} .split .s-5-12, #{$selector} .split .s-7-12, #{$selector} .split .w-11-12,
	#{$selector} .split .w-1-24, #{$selector} .split .s-5-24, #{$selector} .split .s-7-24, #{$selector} .split .w-11-24, #{$selector} .split .w-13-24, #{$selector} .split .w-17-24, #{$selector} .split .w-19-24, #{$selector} .split .s-23-24 {
		float:none !important;
		display:block !important;
		width:auto !important;
		padding-left: $halfSpace !important;
		*padding-left:0 !important;
		padding-right: $halfSpace !important;
		*padding-right:0 !important;
	}
}



@mixin split_reference($selector:''){
	$column-width:7em;
	$gutter-width:3em;
	$gutter-width:0;
	#{$selector} .split .w-1-1   { width:100%;      width:grid-span( 1,  1, 0); }
	#{$selector} .split .w-1-2   { width:50%;       width:grid-span(12, 24, 0); }
	#{$selector} .split .w-1-3   { width:33.33333%; width:grid-span( 8, 24, 0); }
	#{$selector} .split .w-2-3   { width:66.66666%; width:grid-span(16, 24, 0); }
	#{$selector} .split .w-1-4   { width:25%;       width:grid-span( 6, 24, 0); }
	#{$selector} .split .w-3-4   { width:75%;       width:grid-span(18, 24, 0); }
	#{$selector} .split .w-1-6   { width:16.66666%; width:grid-span( 4, 24, 0); }
	#{$selector} .split .w-5-6   { width:83.33333%; width:grid-span(20, 24, 0); }
	#{$selector} .split .w-1-8   { width:12.5%;     width:grid-span( 3, 24, 0); }
	#{$selector} .split .w-3-8   { width:37.5%;     width:grid-span( 9, 24, 0); }
	#{$selector} .split .w-5-8   { width:62.5%;     width:grid-span(15, 24, 0); }
	#{$selector} .split .w-7-8   { width:87.5%;     width:grid-span(21, 24, 0); }
	#{$selector} .split .w-1-12  { width: 8.33333%; width:grid-span( 2, 24, 0); }
	#{$selector} .split .w-5-12  { width:41.66666%; width:grid-span(10, 24, 0); }
	#{$selector} .split .w-7-12  { width:58.33333%; width:grid-span(14, 24, 0); }
	#{$selector} .split .w-11-12 { width:91.66666%; width:grid-span(22, 24, 0); }
	#{$selector} .split .w-1-24  { width: 4.16666%; width:grid-span( 1, 24, 0); }
	#{$selector} .split .w-5-24  { width:20.83333%; width:grid-span( 5, 24, 0); }
	#{$selector} .split .w-7-24  { width:29.16666%; width:grid-span( 7, 24, 0); }
	#{$selector} .split .w-11-24 { width:45.83333%; width:grid-span(11, 24, 0); }
	#{$selector} .split .w-13-24 { width:54.16666%; width:grid-span(13, 24, 0); }
	#{$selector} .split .w-17-24 { width:70.83333%; width:grid-span(17, 24, 0); }
	#{$selector} .split .w-19-24 { width:79.16666%; width:grid-span(19, 24, 0); }
	#{$selector} .split .w-23-24 { width:95.83333%; width:grid-span(23, 24, 0); }
	$column-width:15em;
	$gutter-width:1em;
	$gutter-width:0;
	#{$selector} .split .w-1-5   { width:20%; width:grid-span(1, 5, 0); }
	#{$selector} .split .w-2-5   { width:40%; width:grid-span(2, 5, 0); }
	#{$selector} .split .w-3-5   { width:60%; width:grid-span(3, 5, 0); }
	#{$selector} .split .w-4-5   { width:80%; width:grid-span(4, 5, 0); }
}


//Debug
//@include split();
//@include split_span_1col();
//@include split_width_1col();
//@include split_reference();
